<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            padding: 100px;
        }
    </style>
</head>
<body>
  <div style="background: #cccccc">
      <div style="background: pink" onclick="console.log(this.style.background)">
          <div style="background: skyblue" onclick="alert(this.style.background)"></div>
      </div>
  </div>


  <button id="btn">显示隐藏</button>
  <div id="showDiv" style="margin-top: 10px;padding: 20px;background: #ccc;display: none">

  </div>

<script type="text/javascript">
    var oBtn = document.getElementById('btn');
    var oDiv =document.getElementById('showDiv');

    oBtn.onclick = function (ev) {
        oDiv.style.display = 'block';

        var oEvent = ev||event;
        oEvent.cancelBubble = true;
    };
    document.onclick = function () {
        oDiv.style.display = 'none';
    }

</script>
</body>
</html>